<template>
  <div class="modal_body">
    <el-tabs type="border-card">
      <el-tab-pane
        :label="
          $t(
            'title.tunnellightingsystem_systemmanagement_title_longitudestrategy'
          )
        "
      >
        <div style="display: flex; height: 100%">
          <el-card class="leftCard">
            <el-row class="title">{{
              $t("title.tunnellightingsystem_systemmanagement_title_areainfo")
            }}</el-row>
            <el-row class="selectProduct">
              <el-input
                v-model="orderVal"
                :placeholder="
                  $t(
                    'title.tunnellightingsystem_systemmanagement_title_pleaseinputgruopname'
                  )
                "
                size="mini"
              ></el-input>
            </el-row>
            <el-tree
              :default-expanded-keys="[100]"
              :data="deptOptions"
              :props="defaultProps"
              :render-content="renderContent"
              :filter-node-method="filterNode"
              :expand-on-click-node="false"
              ref="tree"
              node-key="id"
              highlight-current
              @node-click="handleNodeClick"
            >
            </el-tree>
          </el-card>
          <el-card class="rightCard">
            <div class="text-title">
              <el-row class="title">{{
                $t(
                  "title.tunnellightingsystem_systemmanagement_title_strategydetails"
                )
              }}</el-row>
              <div>
                <el-button-group>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="handleEdit"
                  ></el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="delSenceLngLat"
                  ></el-button>
                </el-button-group>
              </div>
            </div>
            <el-form
              ref="Latform"
              :model="fromdata2"
              label-width="80px"
              class="elForm"
              :rules="rules"
            >
              <el-form-item
                prop="sceneName"
                :label="
                  $t(
                    'title.tunnellightingsystem_systemmanagement_title_strategyname'
                  ) + '：'
                "
              >
                <el-input
                  v-model="fromdata2.sceneName"
                  :placeholder="
                    $t(
                      'title.tunnellightingsystem_systemmanagement_title_pleaseenterstrategytype'
                    )
                  "
                  :disabled="disabledVal"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="
                  $t(
                    'title.tunnellightingsystem_systemmanagement_title_projecttype'
                  ) + '：'
                "
              >
                <el-select
                  v-model="fromdata2.productId"
                  :placeholder="
                    $t(
                      'title.tunnellightingsystem_systemmanagement_title_pleaseselectprojecttype'
                    )
                  "
                  @change="handleProductChange"
                  popper-class="elForm-select"
                >
                  <el-option
                    v-for="item in productList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                prop="cityInfo"
                :label="$t('dataCenter.history.384934-25') + '：'"
              >
                <el-cascader
                  style="width: 100%"
                  size="small"
                  :placeholder="$t('dataCenter.history.384934-34')"
                  popper-class="elForm-select2"
                  clearable
                  filterable
                  :options="options"
                  v-model="fromdata2.cityInfo"
                  :disabled="disabledVal"
                  @change="handleChange2($event)"
                ></el-cascader>
              </el-form-item>
            </el-form>
            <div class="form-item">
              <div class="form-label">{{$t('dataCenter.history.384934-35')}}:</div>
              <div class="form-content">
                <el-button @click="showClander(1)">{{$t('dataCenter.history.384934-36')}}</el-button>
              </div>
              <div class="time-item">
                <div class="form-label">{{$t('dataCenter.history.384934-37')}}:</div>
                <div class="time-content">
                  <el-input
                    v-model="triggers.correctedValue"
                    :disabled="disabledVal"
                    width="100px"
                  >
                    <template slot="append">{{
                      $t(
                        "title.tunnellightingsystem_systemmanagement_title_minute"
                      )
                    }}</template></el-input
                  >
                </div>
              </div>
              <!-- <div class="checkbox-content">
                <el-checkbox :disabled="disabledVal" v-model="enable1"
                  >{{$t('title.tunnellightingsystem_accountmanagement_title_enable')}}</el-checkbox
                >
              </div> -->
            </div>
            <div class="form-item">
              <div class="form-label">{{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimmingratio')}}:</div>
              <div class="time-content">
                <el-input
                  v-model="dimData.dim1"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  type="number"
                  :disabled="disabledVal"
                >
                  <template slot="append">%</template>
                </el-input>
              </div>
              <div class="form-label" style="margin-left: 80px">{{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_colortemperatureratio')}}:</div>
              <div class="time-content">
                <el-input
                  v-model="dimData.color1"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  type="number"
                  :disabled="disabledVal"
                >
                  <template slot="append">%</template>
                </el-input>
              </div>
            </div>

            <br />
            <div class="form-item">
              <div class="form-label">{{$t('dataCenter.history.384934-38')}}:</div>
              <div class="form-content">
                <el-button @click="showClander(0)">{{$t('dataCenter.history.384934-36')}}</el-button>
              </div>
              <div class="time-item">
                <div class="form-label">{{$t('dataCenter.history.384934-37')}}:</div>
                <div class="time-content">
                  <el-input
                    v-model="triggers2.correctedValue"
                    :disabled="disabledVal"
                    width="100px"
                  >
                    <template slot="append">{{
                      $t(
                        "title.tunnellightingsystem_systemmanagement_title_minute"
                      )
                    }}</template></el-input
                  >
                </div>
              </div>
              <!-- <div class="checkbox-content">
                <el-checkbox :disabled="disabledVal" v-model="enable2"
                  >{{$t('title.tunnellightingsystem_accountmanagement_title_enable')}}</el-checkbox
                >
              </div> -->
            </div>
            <div class="form-item">
              <div class="form-label">{{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimmingratio')}}:</div>
              <div class="time-content">
                <el-input
                  v-model="dimData.dim2"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  type="number"
                  :disabled="disabledVal"
                >
                  <template slot="append">%</template>
                </el-input>
              </div>
              <div class="form-label" style="margin-left: 80px">{{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_colortemperatureratio')}}:</div>
              <div class="time-content">
                <el-input
                  v-model="dimData.color2"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  type="number"
                  :disabled="disabledVal"
                >
                  <template slot="append">%</template>
                </el-input>
              </div>
            </div>
          </el-card>
        </div>

        <div class="form-bottom" v-if="!disabledVal">
          <el-button type="primary" @click="disabledVal = true"
            >{{$t('dataCenter.history.384934-39')}}</el-button
          >
          <el-button type="primary" @click="handleSubmit">{{$t('title.tunnellightingsystem_systemmanagement_title_save')}}</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('dataCenter.history.384934-40')">
        <div style="display: flex; height: 100%">
          <el-card class="leftCard">
            <el-row class="title">{{
              $t("title.tunnellightingsystem_systemmanagement_title_areainfo")
            }}</el-row>
            <el-row class="selectProduct">
              <el-input
                v-model="orderVal2"
                :placeholder="
                  $t(
                    'title.tunnellightingsystem_systemmanagement_title_pleaseinputgruopname'
                  )
                "
                size="mini"
              ></el-input>
            </el-row>
            <el-tree
              :default-expanded-keys="[100]"
              :data="deptOptions"
              :props="defaultProps"
              :render-content="renderContent"
              :filter-node-method="filterNode"
              :expand-on-click-node="false"
              ref="tree2"
              node-key="id"
              highlight-current
              @node-click="handleNodeClick2"
            >
            </el-tree>
          </el-card>
          <el-card class="group-form rightCard">
            <div class="text-title">
              <el-row class="title">{{
                $t(
                  "title.tunnellightingsystem_systemmanagement_title_strategydetails"
                )
              }}</el-row>
              <div>
                <el-button-group>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="handleEdit2"
                  ></el-button>
                  <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="delSenceTime"
                  ></el-button>
                </el-button-group>
              </div>
            </div>
            <el-form
              ref="Timeform"
              :model="fromdata"
              label-width="80px"
              class="elForm"
              :rules="rules2"
            >
              <el-form-item
                prop="sceneName"
                :label="
                  $t(
                    'title.tunnellightingsystem_systemmanagement_title_strategyname'
                  ) + '：'
                "
              >
                <el-input
                  v-model="fromdata.sceneName"
                  :placeholder="
                    $t(
                      'title.tunnellightingsystem_systemmanagement_title_pleaseenterstrategytype'
                    )
                  "
                  :disabled="disabledVal2"
                ></el-input>
              </el-form-item>
              <el-form-item
                :label="
                  $t(
                    'title.tunnellightingsystem_systemmanagement_title_projecttype'
                  ) + '：'
                "
              >
                <el-select
                  v-model="fromdata.productId"
                  :placeholder="
                    $t(
                      'title.tunnellightingsystem_systemmanagement_title_pleaseselectprojecttype'
                    )
                  "
                  @change="handleProductChange2"
                  popper-class="elForm-select"
                >
                  <el-option
                    v-for="item in productList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="form-item timer">
              <div style="width: 63px"></div>
              <div style="width: 110px">{{$t('table.timeslot')}}</div>
              <div class="light-label" style="width: 100px">{{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_dimmingratio')}}</div>
              <div class="light-label" style="width: 110px">{{$t('tips.tunnellightingsystem_tunnelpanoramicview_tips_colortemperatureratio')}}</div>
            </div>
            <div class="form-item timer">
              <div>{{ $t("table.timequantum1") }}：</div>
              <div>
                <el-time-picker
                  style="width: 110px"
                  v-model="timeData.time1"
                  popper-class="from-pickerqy"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="HH:mm"
                  :disabled="disabledVal2"
                >
                </el-time-picker>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.dimming1"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.color1"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
            </div>
            <div class="form-item timer">
              <div>{{ $t("table.timequantum2") }}：</div>
              <div>
                <el-time-picker
                  style="width: 110px"
                  v-model="timeData.time2"
                  popper-class="from-pickerqy"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="HH:mm"
                  :disabled="disabledVal2"
                >
                </el-time-picker>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.dimming2"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.color2"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
            </div>
            <div class="form-item timer">
              <div>{{ $t("table.timequantum3") }}：</div>
              <div>
                <el-time-picker
                  style="width: 110px"
                  v-model="timeData.time3"
                  popper-class="from-pickerqy"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="HH:mm"
                  :disabled="disabledVal2"
                >
                </el-time-picker>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.dimming3"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.color3"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
            </div>
            <div class="form-item timer">
              <div>{{ $t("table.timequantum4") }}：</div>
              <div>
                <el-time-picker
                  style="width: 110px"
                  v-model="timeData.time4"
                  popper-class="from-pickerqy"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="HH:mm"
                  :disabled="disabledVal2"
                >
                </el-time-picker>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.dimming4"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.color4"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
            </div>
            <div class="form-item timer">
              <div>{{ $t("table.timequantum5") }}：</div>
              <div>
                <el-time-picker
                  style="width: 110px"
                  v-model="timeData.time5"
                  popper-class="from-pickerqy"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="HH:mm"
                  :disabled="disabledVal2"
                >
                </el-time-picker>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.dimming5"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.color5"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
            </div>
            <div class="form-item timer">
              <div>{{ $t("table.timequantum6") }}：</div>
              <div>
                <el-time-picker
                  style="width: 110px"
                  v-model="timeData.time6"
                  popper-class="from-pickerqy"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="HH:mm"
                  :disabled="disabledVal2"
                >
                </el-time-picker>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.dimming6"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
              <div class="light-label">
                <el-input-number
                  v-model="timeData.color6"
                  controls-position="right"
                  oninput="if(value>100)value=100;if(value<0)value=0"
                  :min="0"
                  :max="100"
                  style="width: 100px"
                  size="small"
                  :disabled="disabledVal2"
                ></el-input-number>
              </div>
            </div>
          </el-card>
        </div>
        <div class="form-bottom" v-if="!disabledVal2">
          <el-button type="primary" @click="disabledVal2 = true"
            >{{$t('dataCenter.history.384934-39')}}</el-button
          >
          <el-button type="primary" @click="handleSubmit2">{{$t('title.tunnellightingsystem_systemmanagement_title_save')}}</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :visible.sync="clanderVisible"
      top="3%"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-if="clanderVisible">
        <el-calendar v-model="clanderValue" @input="calenderHandleChange">
          <template slot="dateCell" slot-scope="{ date, data }">
            <p style="margin: 0">{{ data.day.split("-").slice(2).join("") }}</p>
            <div v-for="time in sunriseSunData" :key="time.date">
              <p
                v-if="isSameDate(time.date, data.day)"
                style="font-size: 10px; margin: 15px 0 5px 0"
              >
                {{$t('dataCenter.history.384934-41')}}:
                <span class="text-gray">{{ time.sunrise }}</span>
              </p>
              <p
                v-if="isSameDate(time.date, data.day)"
                style="font-size: 10px; margin: 0"
              >
                {{$t('dataCenter.history.384934-42')}}:
                <span class="text-gray">{{ time.sunset }}</span>
              </p>
            </div>
          </template>
        </el-calendar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeClander"> {{$t('dataCenter.history.384934-43')}} </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import { getSunriseSunset, deptsTreeSelect } from "@/api/iot/device";
import { listShortProduct } from "@/api/iot/product";
import { getUserId } from "@/utils/auth";
import {
  getProjectByGroupId,
  delSceneByGroupId,
  addScene,
  updateScene,
} from "@/api/iot/scene";
export default {
  data() {
    return {
      options: regionData,
      clanderValue: "",
      clanderVisible: false,
      sunriseSunData: [],
      fromdata: {
        sceneName: "",
        applicationName: "fastbee",
        checkDelay: 0,
        cond: 4,
        deptId: null,
        enable: 1,
        executeDelay: 0,
        executeMode: 1,
        hasAlert: 2,
        recoverId: null,
        recoverSceneName: null,
        remark: null,
        sceneId: null,
        silentPeriod: 0,
        userName: null,
        productId: "",
        groupId: null,
        source: "2",
        triggers: [],
        actions: [],
      },
      timeData: {
        groupId: "",
        groupOrder: "",
        productId: "",
        productName: "",
        time1: "",
        time2: "",
        time3: "",
        time4: "",
        time5: "",
        time6: "",
      },
      dimData: {
        dim1: "",
        color1: "",
        dim2: "",
        color2: "",
      },
      actions: {
        arrayIndex: "",
        arrayIndexName: "",
        deviceCount: 0,
        deviceNums: [],
        id: "",
        groupId: "",
        groupOrder: null,
        name: "",
        parentId: "DBIZ",
        parentName: "设备业务功能",
        productId: null,
        productName: null,
        scriptPurpose: 3,
        source: 6,
        type: 2,
        value: "",
      },
      triggers: {
        arrayIndex: "",
        arrayIndexName: "",
        cityInfo: "",
        correctedValue: "0",
        cronExpression: "",
        deviceCount: 0,
        deviceNums: [],
        id: "",
        isAdvance: 0,
        latitude: "",
        longitude: "",
        operator: "",
        name: "",
        parentId: "",
        parentName: "",
        productId: "",
        productName: "",
        scriptPurpose: 2,
        source: 7,
        triggerType: 1,
        type: 1,
        value: "",
      },
      triggers2: {
        arrayIndex: "",
        arrayIndexName: "",
        cityInfo: "",
        correctedValue: "0",
        cronExpression: "",
        deviceCount: 0,
        deviceNums: [],
        id: "",
        isAdvance: 0,
        latitude: "",
        longitude: "",
        operator: "",
        name: "",
        parentId: "",
        parentName: "",
        productId: "",
        productName: "",
        scriptPurpose: 2,
        source: 7,
        triggerType: 0,
        type: 1,
        value: "",
      },
      fromdata2: {
        cityInfo: [],
        sceneName: "",
        applicationName: "fastbee",
        checkDelay: 0,
        cond: 4,
        deptId: null,
        enable: 1,
        executeDelay: 0,
        executeMode: 1,
        hasAlert: 2,
        recoverId: null,
        recoverSceneName: null,
        remark: null,
        sceneId: null,
        silentPeriod: 0,
        userName: null,
        productId: "",
        groupId: null,
        source: "7",
        triggers: [],
        actions: [],
      },
      deptOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      productList: [],
      orderVal: "",
      orderVal2: "",
      disabledVal: true,
      disabledVal2: true,
      sunQueryParams: {
        beginTime: null,
        endTime: null,
        longitude: null,
        latitude: null,
        triggerType: null,
        correctedValue: null,
      },
      enable1: true,
      enable2: true,
      latlngObj: {
        groupId: "",
        userId: "",
        productId: "",
        source: "2",
      },
      timeObj: {
        groupId: "",
        userId: "",
        productId: "",
        source: "1",
      },
      fromJson: {},
      rules: {
        sceneName: [
          { required: true, message: this.$t("dataCenter.history.384934-44"), trigger: "blur" },
        ],
        cityInfo: [
          { required: true, message: this.$t("dataCenter.history.384934-45"), trigger: "blur" },
        ],
      },
      rules2: {
        sceneName: [
          { required: true, message: this.$t("dataCenter.history.384934-44"), trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getAllUserList();
    this.getProductList();
  },
  watch: {
    orderVal(val) {
      this.$refs.tree.filter(val);
    },
    orderVal2(val) {
      this.$refs.tree2.filter(val);
    },
  },
  methods: {
    reset() {
      this.actions = {
        arrayIndex: "",
        arrayIndexName: "",
        deviceCount: 0,
        deviceNums: [],
        id: "",
        groupId: "",
        groupOrder: null,
        name: "",
        parentId: "DBIZ",
        parentName: "设备业务功能",
        productId: this.actions.productId,
        productName: this.actions.productName,
        scriptPurpose: 3,
        source: 6,
        type: 2,
        value: "",
      };
      this.triggers = {
        arrayIndex: "",
        arrayIndexName: "",
        cityInfo: "",
        correctedValue: "0",
        cronExpression: "",
        deviceCount: 0,
        deviceNums: [],
        id: "",
        isAdvance: 0,
        latitude: "",
        longitude: "",
        operator: "",
        name: "",
        parentId: "",
        parentName: "",
        productId: "",
        productName: "",
        scriptPurpose: 2,
        source: 7,
        triggerType: 1,
        type: 1,
        value: "",
      };
      this.triggers2 = {
        arrayIndex: "",
        arrayIndexName: "",
        cityInfo: "",
        correctedValue: "0",
        cronExpression: "",
        deviceCount: 0,
        deviceNums: [],
        id: "",
        isAdvance: 0,
        latitude: "",
        longitude: "",
        operator: "",
        name: "",
        parentId: "",
        parentName: "",
        productId: "",
        productName: "",
        scriptPurpose: 2,
        source: 7,
        triggerType: 0,
        type: 1,
        value: "",
      };
      this.fromdata2 = {
        cityInfo: [],
        sceneName: "",
        applicationName: "fastbee",
        checkDelay: 0,
        cond: 4,
        deptId: null,
        enable: 1,
        executeDelay: 0,
        executeMode: 1,
        hasAlert: 2,
        recoverId: null,
        recoverSceneName: null,
        remark: null,
        sceneId: null,
        silentPeriod: 0,
        productId: this.fromdata2.productId,
        userName: null,
        groupId: this.fromdata2.groupId,
        source: "7",
        triggers: [],
        actions: [],
      };
      this.dimData = {
        dim1: "",
        color1: "",
        dim2: "",
        color2: "",
      };
    },
    reset2() {
      this.fromdata = {
        sceneName: "",
        applicationName: "fastbee",
        checkDelay: 0,
        cond: 4,
        deptId: null,
        enable: 1,
        executeDelay: 0,
        executeMode: 1,
        hasAlert: 2,
        recoverId: null,
        recoverSceneName: null,
        remark: null,
        sceneId: null,
        silentPeriod: 0,
        userName: null,
        productId: this.fromdata.productId,
        groupId: this.fromdata.groupId,
        source: "2",
        triggers: [],
        actions: [],
      };
      this.timeData = {
        groupId: this.timeData.groupId,
        groupOrder: this.timeData.groupOrder,
        productId: this.timeData.productId,
        productName: this.timeData.productName,
        time1: "",
        time2: "",
        time3: "",
        time4: "",
        time5: "",
        time6: "",
      };
    },
    getProductList() {
      listShortProduct().then((res) => {
        if (res.code == 200) {
          let name = res.data.find((item) => item.id == res.data[0].id).name;
          this.fromdata2.productId = res.data[0].id;
          this.fromdata.productId = res.data[0].id;
          this.latlngObj.productId = res.data[0].id;
          this.timeObj.productId = res.data[0].id;
          this.actions.productId = res.data[0].id;
          this.actions.productName = name;
          this.timeData.productId = res.data[0].id;
          this.timeData.productName = name;

          this.latlngObj.userId = getUserId();
          this.timeObj.userId = getUserId();
          this.productList = res.data;
        }
      });
    },
    renderContent(h, { node, data, store }) {
      if (data.label) {
        return h("span", data.label);
      } else {
        return h("span", data.groupName);
      }
    },
    filterNode(value, data, node) {
      if (data.label) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      } else if (node.parent.label.indexOf(value) !== -1) {
        return true;
      }
    },
    handleChange2(value) {
      let city = this.getCodeToText(null, value);
      this.triggers.cityInfo = value.toString();
      this.triggers2.cityInfo = value.toString();

      let that = this;
      var geocoder = new BMap.Geocoder();
      function getCityLocation(cityName) {
        geocoder.getPoint(
          cityName,
          function (point) {
            if (point) {
              that.triggers.longitude = point.lng;
              that.triggers.latitude = point.lat;
              that.triggers2.longitude = point.lng;
              that.triggers2.latitude = point.lat;
              console.log("经度: " + point.lng + ", 纬度: " + point.lat);
            } else {
              console.log("未找到匹配的地址！");
            }
          },
          cityName
        );
      }

      getCityLocation(city);
    },
    showClander(type) {
      let item = this.fromdata2.cityInfo.toString();
      if (item == null || item == "") {
        this.$message.error(this.$t('dataCenter.history.384934-46'));
      } else {
        this.clanderVisible = true;

        const currentDate = new Date();

        // 获取当前月的开始日期
        const startOfMonth = new Date(
          currentDate.getFullYear(),
          currentDate.getMonth(),
          1
        );

        // 获取下个月的第一天
        const endOfMonth = new Date(
          currentDate.getFullYear(),
          currentDate.getMonth() + 1,
          0
        );

        // 格式化日期为 YYYY-MM-DD 格式
        const formatDate = (date) => {
          const year = date.getFullYear();
          const month = (date.getMonth() + 1).toString().padStart(2, "0");
          const day = date.getDate().toString().padStart(2, "0");
          return `${year}-${month}-${day}`;
        };
        this.sunQueryParams = {
          beginTime: formatDate(startOfMonth),
          endTime: formatDate(endOfMonth),
          longitude: this.longitude,
          latitude: this.latitude,
          triggerType: type,
          correctedValue:
            type == 1
              ? this.fromdata2.correctedValue
              : this.fromdata2.correctedValue2,
        };
        getSunriseSunset(this.sunQueryParams).then((response) => {
          this.sunriseSunData = response.data;
        });
      }
    },
    getCodeToText(codeStr, codeArray) {
      if (null === codeStr && null === codeArray) {
        return null;
      } else if (null === codeArray) {
        codeArray = codeStr.split(",");
      }
      let area = "";

      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      return area;
    },
    calenderHandleChange(value) {
      const date = new Date(value);
      const day = date.getDate().toString().padStart(2, "0");

      const startOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
      const endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);

      // 格式化日期为 YYYY-MM-DD 格式
      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const day = date.getDate().toString().padStart(2, "0");
        return `${year}-${month}-${day}`;
      };

      let nowdata = new Date();
      if (day == "01" || formatDate(date) == formatDate(nowdata)) {
        this.sunQueryParams.beginTime = formatDate(startOfMonth);
        this.sunQueryParams.endTime = formatDate(endOfMonth);
        getSunriseSunset(this.sunQueryParams).then((response) => {
          this.sunriseSunData = response.data;
        });
      }
    },
    closeClander() {
      this.clanderVisible = false;
      this.clanderValue = null;
    },
    isSameDate(date, day) {
      return date === day;
    },
    handleSubmit() {
      let that = this;
      this.$refs["Latform"].validate((valid) => {
        if (valid) {
          if (this.enable1) {
            if (this.dimData.dim1 == "" && this.dimData.color1 == "") {
              this.$message.error(that.$t("dataCenter.history.384934-24"));
              this.fromdata2.triggers = [];
              return;
            }else{
               this.fromdata2.triggers.push(this.triggers);
            }
          }
          if (this.enable2) {
            if (this.dimData.dim2 == "" && this.dimData.color2 == "") {
              this.$message.error(that.$t("dataCenter.history.384934-24"));
              this.fromdata2.triggers = [];
              return;
            }else{
              this.fromdata2.triggers.push(this.triggers2);
            }
          }
          let action = JSON.parse(JSON.stringify(this.actions));
          if (this.dimData.dim1 != "" && this.dimData.color1 != "") {
            action.value = that.dimData.dim1 + "," + this.dimData.color1;
            action.name = "调光值,色温值";
            action.id = "DBIZ_Dim,DBIZ_Color";
            that.fromdata2.actions.push(action);
          } else if (this.dimData.dim1 != "") {
            action.value = that.dimData.dim1;
            action.id = "DBIZ_Dim";
            action.name = "调光值";
            that.fromdata2.actions.push(action);
          } else if (this.dimData.color1 != "") {
            action.value = that.dimData.color1;
            action.id = "DBIZ_Color";
            action.name = "色温值";
            that.fromdata2.actions.push(action);
          }

          let action2 = JSON.parse(JSON.stringify(this.actions));
          if (this.dimData.dim2 != "" && this.dimData.color2 != "") {
            action2.value = that.dimData.dim2 + "," + this.dimData.color2;
            action2.name = "调光值,色温值";
            action2.id = "DBIZ_Dim,DBIZ_Color";
            that.fromdata2.actions.push(action2);
          } else if (this.dimData.dim2 != "") {
            action2.value = that.dimData.dim2;
            action2.id = "DBIZ_Dim";
            action2.name = "调光值";
            that.fromdata2.actions.push(action2);
          } else if (this.dimData.color2 != "") {
            action2.value = that.dimData.color2;
            action2.id = "DBIZ_Color";
            action2.name = "色温值";
            that.fromdata2.actions.push(action2);
          }
          console.log(this.fromdata2);

          if (this.fromdata2.sceneId == null || this.fromdata2.sceneId == "") {
            addScene(this.fromdata2).then((res) => {
              if (res.code == 200) {
                that.$message.success(that.$t("dataCenter.history.384934-26"));
                that.fromdata2.actions = [];
                that.fromdata2.triggers = [];
                that.disabledVal = true;
              }
            });
          } else {
            updateScene(this.fromdata2).then((res) => {
              if (res.code == 200) {
                that.$message.success(that.$t("dataCenter.history.384934-30"));
                that.fromdata2.actions = [];
                that.fromdata2.triggers = [];
                that.disabledVal = true;
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    handleSubmit2() {
      let that = this;
      function timeToMinutes(time) {
        const [hours, minutes] = time.split(":").map(Number);
        return hours * 60 + minutes;
      }
      this.$refs["Timeform"].validate((valid) => {
        if (valid) {
          let maxTime = null;
          let toTime = null;
          let actions = [];
          let triggers = [];
          for (let i = 1; i < 7; i++) {
            if (
              that.timeData["time" + i] != "" &&
              that.timeData["time" + i] != null &&
              that.timeData["time" + i] != undefined
            ) {
              let dim = that.timeData["dimming" + i].toString();
              let color = that.timeData["color" + i].toString();
              if (maxTime == null) {
                let cornStr = "";
                maxTime = timeToMinutes(that.timeData["time" + i]);
                toTime = that.timeData["time" + i];
                if (dim == undefined && color == undefined) {
                  this.$message.error(that.$t("dataCenter.history.384934-33"));
                  return;
                } else {
                  let value = "";
                  let name = "";
                  let id = "";
                  if (dim != "" && color != "") {
                    value = dim + "," + color;
                    name = "调光值,色温值";
                    id = "DBIZ_Dim,DBIZ_Color";
                  } else if (dim != "") {
                    value = dim;
                    id = "DBIZ_Dim";
                    name = "调光值";
                  } else if (color != "") {
                    value = color;
                    id = "DBIZ_Color";
                    name = "色温值";
                  }
                  actions.push({
                    arrayIndex: "",
                    arrayIndexName: "",
                    deviceCount: 0,
                    deviceNums: [],
                    id: id,
                    groupId: that.timeData.groupId,
                    groupOrder: that.timeData.groupOrder,
                    name: name,
                    parentId: "DBIZ",
                    parentName: "设备业务功能",
                    productId: that.timeData.productId,
                    productName: that.timeData.productName,
                    scriptPurpose: 3,
                    source: 6,
                    type: 2,
                    value: value,
                  });
                }
                cornStr = that.crontabValueString(
                  "0:0",
                  that.timeData["time" + i]
                );
                triggers.push({
                  arrayIndex: "",
                  arrayIndexName: "",
                  cityInfo: "",
                  correctedValue: "0",
                  cronExpression: cornStr,
                  deviceCount: 0,
                  deviceNums: [],
                  id: "",
                  isAdvance: 1,
                  latitude: "",
                  longitude: "",
                  operator: "",
                  name: "",
                  parentId: "",
                  parentName: "",
                  productId: "",
                  productName: "",
                  scriptPurpose: 2,
                  source: 2,
                  triggerType: 0,
                  type: 1,
                  value: "",
                });
                continue;
              }
              let time = timeToMinutes(that.timeData["time" + i]);
              if (time > maxTime) {
                let cornStr = "";
                cornStr = that.crontabValueString(
                  toTime,
                  that.timeData["time" + i]
                );
                maxTime = time;
                toTime = that.timeData["time" + i];
                if (dim == undefined && color == undefined) {
                  this.$message.error(that.$t("dataCenter.history.384934-33"));
                  return;
                } else {
                  let value = "";
                  let name = "";
                  let id = "";
                  if (dim != "" && color != "") {
                    value = dim + "," + color;
                    name = "调光值,色温值";
                    id = "DBIZ_Dim,DBIZ_Color";
                  } else if (dim != "") {
                    value = dim;
                    id = "DBIZ_Dim";
                    name = "调光值";
                  } else if (color != "") {
                    value = color;
                    id = "DBIZ_Color";
                    name = "色温值";
                  }
                  actions.push({
                    arrayIndex: "",
                    arrayIndexName: "",
                    deviceCount: 0,
                    deviceNums: [],
                    id: id,
                    groupId: that.timeData.groupId,
                    groupOrder: that.timeData.groupOrder,
                    name: name,
                    parentId: "DBIZ",
                    parentName: "设备业务功能",
                    productId: that.timeData.productId,
                    productName: that.timeData.productName,
                    scriptPurpose: 3,
                    source: 6,
                    type: 2,
                    value: value,
                  });
                }
                triggers.push({
                  arrayIndex: "",
                  arrayIndexName: "",
                  cityInfo: "",
                  correctedValue: "0",
                  cronExpression: cornStr,
                  deviceCount: 0,
                  deviceNums: [],
                  id: "",
                  isAdvance: 1,
                  latitude: "",
                  longitude: "",
                  operator: "",
                  name: "",
                  parentId: "",
                  parentName: "",
                  productId: "",
                  productName: "",
                  scriptPurpose: 2,
                  source: 2,
                  triggerType: 0,
                  type: 1,
                  value: "",
                });
                continue;
              } else {
                that.$message.error(that.$t("dataCenter.history.384934-31"));
                return;
              }
            }
          }
          if (maxTime == null) {
            that.$message.error(that.$t("dataCenter.history.384934-32"));
            return;
          }
          let triggersInfo = JSON.parse(JSON.stringify(triggers[0]));
          triggersInfo.cronExpression = that.crontabValueString(
            toTime,
            "23:59"
          );

          actions.unshift(actions[actions.length-1]);
          triggers.push(triggersInfo);
          this.fromdata.actions = actions;
          this.fromdata.triggers = triggers;
          console.log(this.fromdata);

          if (this.fromdata.sceneId == null || this.fromdata.sceneId == "") {
            addScene(this.fromdata).then((res) => {
              if (res.code == 200) {
                that.$message.success(that.$t("dataCenter.history.384934-26"));
                that.fromdata.actions = [];
                that.fromdata.triggers = [];
                that.disabledVal2 = true;
              }
            });
          } else {
            updateScene(this.fromdata).then((res) => {
              if (res.code == 200) {
                that.$message.success(that.$t("dataCenter.history.384934-30"));
                that.fromdata.actions = [];
                that.fromdata.triggers = [];
                that.disabledVal2 = true;
              }
            });
          }
        } else {
          return;
        }
      });
    },
    crontabValueString(time1, time2) {
      let min1 = time1.split(":")[1];
      let hour1 = time1.split(":")[0];
      let hour2 = time2.split(":")[0];
      let num = Number(hour2) - Number(hour1);
      let weekData = [1, 2, 3, 4, 5, 6, 7];
      for (let i = 0; i < weekData.length; i++) {
        if (weekData[i] != 7) {
          weekData[i] = weekData[i] + 1;
        } else {
          weekData[i] = 1;
        }
      }
      let obj = {
        second: "0",
        min: "*",
        hour: "*",
        day: "?",
        month: "*",
        week: weekData.join(","),
        year: "",
      };
      obj.min = Number(min1) < 55 ? min1 + "/" + 5 : min1 + "/" + 1;
      if (num > 1) {
        if(Number(hour2) == 23){
          obj.hour = hour1 + "-" + hour2;
        }else{
          obj.hour = hour1 + "-" + (Number(hour2) - 1).toString();
        }
      } else {
          obj.hour = hour1
      }
      let str =
        obj.second +
        " " +
        obj.min +
        " " +
        obj.hour +
        " " +
        obj.day +
        " " +
        obj.month +
        " " +
        obj.week +
        (obj.year == "" ? "" : " " + obj.year);
      return str;
    },
    handleNodeClick(data) {
      if (data.groupId) {
        this.reset();
        this.latlngObj.groupId = data.groupId;
        this.fromdata2.groupId = data.groupId;
        this.actions.groupId = data.groupId;
        this.actions.groupOrder = data.groupOrder;
        this.getPorjectGroupData(this.latlngObj, "latlng");
      }
    },
    handleNodeClick2(data) {
      if (data.groupId) {
        this.reset2();
        this.timeObj.groupId = data.groupId;
        this.fromdata.groupId = data.groupId;
        this.timeData.groupId = data.groupId;
        this.timeData.groupOrder = data.groupOrder;
        this.getPorjectGroupData(this.timeObj, "time");
      }
    },
    getAllUserList() {
      let that = this;
      deptsTreeSelect().then((response) => {
        if (response.data.length > 0) {
          this.deptOptions = this.replaceGroupChildrenWithChildren(
            response.data
          );
          let deptId = this.$store.state.user.deviceInfo.deptId;
          if (deptId) {
            that.$nextTick(() => {
              that.$refs.tree.setCurrentKey(deptId);
            });
          }
        } else {
          this.deptOptions = {};
        }
      });
    },
    replaceGroupChildrenWithChildren(treeData) {
      return treeData.map((newNode) => {
        if (newNode.groupChildren && newNode.groupChildren.length > 0) {
          for (let i in newNode.groupChildren) {
            newNode.groupChildren[i].label = newNode.groupChildren[i].groupName;
          }
          let obj = {
            label: this.$t(
              "title.tunnellightingsystem_systemmanagement_title_groupinformation"
            ),
            id: 0,
            children: newNode.groupChildren,
          };
          if (newNode.children && newNode.children.length > 0) {
            newNode.children.unshift(obj);
          } else {
            newNode.children = [obj];
          }
        }

        // 如果节点有 children，递归处理子节点
        if (newNode.children && newNode.children.length > 0) {
          this.replaceGroupChildrenWithChildren(newNode.children);
        }

        return newNode;
      });
    },
    handleEdit() {
      if (this.latlngObj.groupId == "") {
        this.$message.error(this.$t("dataCenter.history.384934-22"));
        return;
      }
      this.disabledVal = false;
    },
    handleEdit2() {
      if (this.timeObj.groupId == "") {
        this.$message.error(this.$t("dataCenter.history.384934-22"));
        return;
      }
      this.disabledVal2 = false;
    },
    handleProductChange(val) {
      this.fromdata2.productId = val;
      this.latlngObj.productId = val;
      this.actions.productId = val;
      this.actions.productName = this.productList.find(
        (item) => item.id == val
      ).name;

      if (this.latlngObj.groupId != "") {
        this.getPorjectGroupData(this.latlngObj, "latlng");
      } else {
        this.$message.error(this.$t("dataCenter.history.384934-22"));
      }
    },
    handleProductChange2(val) {
      this.fromdata.productId = val;
      this.timeObj.productId = val;
      this.timeData.productId = val;
      this.timeData.productName = this.productList.find(
        (item) => item.id == val
      ).name;
      if (this.timeObj.groupId != "") {
        this.getPorjectGroupData(this.timeObj, "time");
      } else {
        this.$message.error(this.$t("dataCenter.history.384934-22"));
      }
    },
    getPorjectGroupData(data, type) {
      let that = this;
      getProjectByGroupId(data).then((res) => {
        res.data.cond = 4;
        if (type == "latlng") {
          that.fromdata2 = JSON.parse(JSON.stringify(res.data));
          that.fromdata2.actions = [];
          that.fromdata2.triggers = [];
          const lastIndex = res.data.sceneName.lastIndexOf("_");
          if (lastIndex != -1) {
            that.fromdata2.sceneName = res.data.sceneName.substring(
              0,
              lastIndex
            );
          } else {
            that.fromdata2.sceneName = res.data.sceneName;
          }
          that.fromdata2.productId = res.data.actions[0].productId;
          that.fromdata2.groupId = res.data.actions[0].groupId;
          that.fromdata2.cityInfo = res.data.triggers[0].cityInfo.split(",");

          if (
            res.data.triggers[0].cityInfo != null ||
            res.data.triggers[0].cityInfo != ""
          ) {
            that.fromdata2.source = "2";
          } else {
            that.fromdata2.source = "1";
          }
          if (res.data.triggers.length > 0) {
            that.triggers = res.data.triggers[0];
            that.actions = res.data.actions[0];
            if (res.data.actions[0].value.includes(",")) {
              that.dimData.dim1 = res.data.actions[0].value.split(",")[0];
              that.dimData.color1 = res.data.actions[0].value.split(",")[1];
            } else if (res.data.actions[0].id == "DBIZ_Dim") {
              that.dimData.dim1 = res.data.actions[0].value;
            } else {
              that.dimData.color1 = res.data.actions[0].value;
            }
          }
          if (res.data.triggers.length > 1) {
            that.triggers2 = res.data.triggers[1];
            if (res.data.actions[1].value.includes(",")) {
              that.dimData.dim2 = res.data.actions[1].value.split(",")[0];
              that.dimData.color2 = res.data.actions[1].value.split(",")[1];
            } else if (res.data.actions[1].id == "DBIZ_Dim") {
              that.dimData.dim2 = res.data.actions[1].value;
            } else {
              that.dimData.color2 = res.data.actions[1].value;
            }
          }
        } else {
          that.fromdata = JSON.parse(JSON.stringify(res.data));
          that.fromdata.actions = [];
          that.fromdata.triggers = [];
          let triggers = res.data.triggers;
          const lastIndex = res.data.sceneName.lastIndexOf("_");
          if (lastIndex != -1) {
            that.fromdata.sceneName = res.data.sceneName.substring(
              0,
              lastIndex
            );
          } else {
            that.fromdata.sceneName = res.data.sceneName;
          }
          that.fromdata.productId = res.data.actions[0].productId;
          that.fromdata.groupId = res.data.actions[0].groupId;

          if (
            res.data.triggers[0].cronExpression != null ||
            res.data.triggers[0].cronExpression != ""
          ) {
            that.fromdata.source = "2";
          } else {
            that.fromdata.source = "1";
          }
          for (let i = 1; i < triggers.length; i++) {
            if (res.data.actions[i].value.includes(",")) {
              this.timeData["dimming" + i] =
                res.data.actions[i].value.split(",")[0];
              this.timeData["color" + i] =
                res.data.actions[i].value.split(",")[1];
            } else if (res.data.actions[i].id == "DBIZ_Dim") {
              this.timeData["dimming" + i] = res.data.actions[i].value;
            } else {
              this.timeData["color" + i] = res.data.actions[i].value;
            }
            let time = res.data.triggers[i].cronExpression
              .split(" ")[2]
              .split("-")[0];
            let min = res.data.triggers[i].cronExpression
              .split(" ")[1]
              .split("/")[0];
            this.timeData["time" + i] = time + ":" + min;
          }
        }
      });
    },
    delSenceLngLat() {
      this.$confirm(this.$t("dataCenter.history.384934-27"), {
        confirmButtonText: this.$t("button.confirm"),
        cancelButtonText: this.$t("button.cancel"),
        type: "warning",
      })
        .then(() => {
          delSceneByGroupId(this.latlngObj).then((res) => {
            this.reset();
            this.$message.success(this.$t("dataCenter.history.384934-29"));
          });
        })
        .catch(() => {
          this.$message.info(this.$t("dataCenter.history.384934-28"));
        });
    },
    delSenceTime() {
      this.$confirm(this.$t("dataCenter.history.384934-27"), {
        confirmButtonText: this.$t("button.confirm"),
        cancelButtonText: this.$t("button.cancel"),
        type: "warning",
      })
        .then(() => {
          delSceneByGroupId(this.timeObj).then((res) => {
            this.reset2();
            this.$message.success(this.$t("dataCenter.history.384934-29"));
          });
        })
        .catch(() => {
          this.$message.info(this.$t("dataCenter.history.384934-28"));
        });
    },
  },
};
</script>
<style scoped>
.modal_body {
  height: 93%;
  font-size: 14px;
  padding: 0;
  background-color: transparent;
}
.modal_body >>> .el-tabs {
  height: 100%;
  position: relative;
}
.modal_body >>> .el-tabs--border-card > .el-tabs__content {
  height: 93%;
}
.modal_body >>> .el-tab-pane {
  height: 100%;
}
.form-item {
  display: flex;
  align-items: center;
  height: 40px;
  margin-left: 10px;
}
.form-label {
  margin-right: 10px;
}
.form-content {
  width: 200px;
}
.leftCard {
  width: 300px;
  height: 100%;
  margin-right: 5px;
}
.leftCard >>> .el-card__body {
  height: 100%;
}
.leftCard >>> .el-tree {
  height: 88%;
  overflow-x: auto;
  overflow-y: auto;
  padding-left: 0 !important;
}
.rightCard {
  width: 845px;
  height: 100%;
}
.rightCard >>> .el-card__body {
  height: 100%;
}
.selectProduct {
  margin-bottom: 10px;
}
.form-content >>> .el-button {
  height: 30px;
  width: 100%;
  padding: 0;
}
.form-content >>> .el-input__inner {
  height: 30px;
}
.checkbox-content {
  margin-left: 10px;
}
.text-gray {
  color: red;
  font-size: 13px;
}
.timer >>> .el-input__inner {
  height: 32px;
}
.light-label {
  margin-left: 10px;
}
.form-bottom {
  position: absolute;
  right: 2%;
  bottom: 5%;
}
.light-bottom {
  margin-left: 10px;
  height: 32px;
}
.light-bottom >>> .el-button {
  height: 32px;
  padding: 8px 20px;
}
.group-form {
  flex: 2;
}
.group-form >>> .el-.el-input__icon {
  line-height: 32px;
}
.group-form >>> .el-input__icon {
  line-height: 32px;
}
.form-item >>> .el-input__icon {
  line-height: 32px;
}
.elForm >>> .el-input__icon {
  line-height: 32px;
}
.elForm >>> .el-form-item__label {
  height: 32px;
  padding: 0;
}
.elForm >>> .el-input__inner {
  height: 32px;
  width: 200px;
}
.elForm >>> .el-form-item {
  margin-bottom: 15px;
}
.elForm >>> .el-form-item__error {
  margin-top: 0px;
}
.elForm >>> .el-form-item__content{
  width: 200px;
}
.leftCard .title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}
.rightCard .title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.text-title {
  display: flex;
  justify-content: space-between;
}
.time-item {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.time-content {
  width: 130px;
}
.time-content >>> .el-input__inner {
  height: 30px;
}
.form-item-time {
}
</style>
<style>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* 去掉箭头 */
  margin: 0; /* 清除额外的边距 */
}

/* 针对 Firefox 浏览器 */
input[type="number"] {
  -moz-appearance: textfield; /* 去掉箭头 */
}
.elForm-select {
  margin-top: 4px;
}
.elForm-select2 {
  margin-top: 8px;
}
</style>